<template>
	<view class="index u-pb-50 full-h">
		<!-- 搜索 -->
		<!-- <view class='u-p-10'>
			<u-search placeholder="请输入关键字" v-model="keyword" @search='search' :show-action='false'></u-search>
		</view> -->
		
		<!-- 轮播图 -->
		<view class='swiper radio-0'>
			<u-swiper :list="swiperList" mode='number' indicator-pos='bottomRight' height='400'></u-swiper>
		</view>
		
		<view class="car full-w p10 mt20">
			<view class='mb5 f40'>车牌输入: {{carNum}}</view>
			<CarKeyBoard v-model='carNum'></CarKeyBoard>
		</view>
	<!-- 	<view class='px15'>
			<u-form :model="form" ref="uForm" :error-type="['message']">
				<u-form-item label-width='130' prop='rec_name' label="收货人">
					<u-input v-model.lazy="form.rec_name" :cursor-spacing='30' placeholder="收货人姓名" />
				</u-form-item>
				<u-form-item label-width='130' prop='rec_phone' label="手机号码">
					<u-input v-model.lazy="form.rec_phone" type='number' :cursor-spacing='30' placeholder="请输入手机号码" />
				</u-form-item>
				<u-form-item label-width='130' prop='region' label="所在地区">
					<u-input v-model.lazy="form.region" type='text' :cursor-spacing='30' placeholder="请选择所在地区"
						disabled @click='showPicker = !showPicker' />
				
					<u-select v-model="showPicker" mode="mutil-column-auto" :list="areaList" @confirm='confirm'></u-select>
				</u-form-item>
				<u-form-item label-width='130' prop='address' label="详细地址">
					<u-input v-model.lazy="form.address" :adjust-position='false' type='text' :cursor-spacing='30' placeholder="街道门牌信息" />
				</u-form-item>
			</u-form>
		</view> -->
	<!-- 	
		<view class='mt20'> 
			<u-upload class='px20' :action="uploadUrl" :header='AuthHeaders' @on-success='uploadSuccess'></u-upload>
			<u-button class='mx20 mt20' type='primary' @click="submit">保存</u-button>
		</view> -->
	</view>
</template>

<script>
	import CarKeyBoard from '@/uni_modules/Jorec-carKeyBoard/components/Jorec-carKeyBoard/Jorec-carKeyBoard.vue'
	export default {
		components: {
			CarKeyBoard	
		},
		data() {
			return {
				carNum: '粤SA0001',
				showPicker: false,
				form: {},
				areaList: [],
				fileList: [],
				uploadList: [],
				swiperList: [],
				keyword: '',
				// 一键生成轮播图片
				// swiperList: [...new Array(5)].map((item, i) => `/static/swiper/img${ i + 1 }.png` ).join().split(',')
			}
		},
		async onLoad() {	
			// this.getSwiper()
		},
		methods: {
			getCarNum(val) {
				this.carNum = val
			},
			search(value) {
				console.log(value)
			},
			async submit() {
				const res = await this.$http.post('uploadList', this.uploadList )
				// 刷新列表
				this.getSwiper()
			},
			// 获取轮播图片
			async getSwiper() {
				// 获取数据
				const res = await this.$http.get('uploadList')
				// 循环轮播图列表
				this.swiperList = res.map( item => item)
			},
			
			uploadSuccess(item) {
				this.uploadList.push(item.url)
			}
		}
	}	
</script>

<style lang="scss" scoped>
	.index {
		.swiper {
			width: 100%;
		}
	}
</style>
